<div id="windowmask" class="windowmask" style="display: none;z-index: 200;"></div>
<div class="container">
    <?php
    include 'member-left.php';
    $arrNotFriend = $member->getFriendInGroup();
    $num_records = $db->NumRows($arrNotFriend);
    ?>
    <div class="col_r">
        <div class='friend_container'>
            <div class="header_link">
                <ul class="left">
                    <li class="actived" style="width: 150px"><a href="#">Danh sách bạn bè (<b id="num_rows" ><?php echo $num_records; ?></b>)</a></li>
                    <li class="search">
                        <span class="left"></span><input class="inputtext" type="text" id="txtkey_friend" value="Nhập tên một người bạn" title="Nhập tên một người bạn"><span class="right"></span>
                        <div class="reset"></div>
                    </li>

                    <li class="end"></li>

                </ul>

            </div>
            <div id="MySplitter">

                <div id="recyclebin_g" class="friend_group_box">Xóa khỏi nhóm</div>
                <div id='recyclebin' class="friend_group_box">Thôi là bạn</div>           
                
                <div class="block_friend" id="friend_drag">
       <div id="mcs_container">
                        <div class="customScrollBox">
                            <div class="container_scroll">
                                <div class="content"> 
                    <ul class="friend_list">
                        <?php
                        while ($row = $db->FetchToArray($arrNotFriend)) {
                            ?>
                            <li >
                                <div class="friend_box drag" title="<?php echo $row['fullname']; ?>" id="<?php echo $row['id']; ?>" rel="<?php echo $row['groups']; ?>">
                                    <img src="<?php echo $common->get_avatar_thumb($row['avatar']); ?>">

                                </div>
                                <h4><a href="<?php echo DOMAIN . "/thanh-vien?mid=" . $row['id']; ?>"><?php echo $row['fullname']; ?></a></h4>
                                <span><?php echo $row['email']; ?></span>
                                <span class="sys_action"></span>

                            </li>
                        <?php } ?>
                    </ul>
                    <img src="/images/loading_small.gif" style="display:none;margin-left: 265px" id="fri_loading" >
                    <input type="hidden" class="items_selected" id="number_selected"></input>
            </div>
                            </div>
                            <div class="dragger_container">
                                <div class="dragger"></div>
                            </div>
                        </div>                       
                    </div>
                        <script>
                        $(window).load(function() {
                            mCustomScrollbars();
                        });

                        function mCustomScrollbars(){
                            /* 
        malihu custom scrollbar function parameters: 
        1) scroll type (values: "vertical" or "horizontal")
        2) scroll easing amount (0 for no easing) 
        3) scroll easing type 
        4) extra bottom scrolling space for vertical scroll type only (minimum value: 1)
        5) scrollbar height/width adjustment (values: "auto" or "fixed")
        6) mouse-wheel support (values: "yes" or "no")
        7) scrolling via buttons support (values: "yes" or "no")
        8) buttons scrolling speed (values: 1-20, 1 being the slowest)
                             */
                            $("#mcs_container").mCustomScrollbar("vertical",0,"easeOutCirc",1.05,"auto","yes","no",15); 
                        }

                        /* function to fix the -10000 pixel limit of jquery.animate */
                        $.fx.prototype.cur = function(){
                            if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
                                return this.elem[ this.prop ];
                            }
                            var r = parseFloat( jQuery.css( this.elem, this.prop ) );
                            return typeof r == 'undefined' ? 0 : r;
                        }

                        /* function to load new content dynamically */
                        function LoadNewContent(id,file){
                            $("#"+id+" .customScrollBox .content").load(file,function(){
                                mCustomScrollbars();
                            });
                        }
                    </script>
                    <script src="/js/scrollbar/jquery.mCustomScrollbar.js"></script>
                </div>

                <div class="friendgroup_container" >
             
                                    <ul class="friendgroup_list">

                                        <?php
                                        $arrGroup = $member->getAllGroup();
                                        while ($row = $db->FetchToArray($arrGroup)) {
                                            ?>
                                            <li >
                                                <div class="circle">
                                                    <div class="friend_group_box" id="<?php echo $row['id']; ?>" title="<?php echo $row['desc']; ?>">
                                                        <div class="content" >
                                                            <span><b><?php echo $row['group_name']; ?></b></br> (<b class="number"><?php echo $row['length']; ?></b> người)</span>
                                                        </div>
                                                    </div>
                                                </div>

                                            </li>
                                        <?php } ?>
                                        <li >
                                            <div class="circle">
                                                <div class="add" >

                                                    <div class="content" >
                                                        <a href="javascript:void();" onclick="showCreateGroup();">Thêm nhóm </a>

                                                    </div>

                                                </div>
                                            </div>
                                        </li>

                                    </ul>
                                    <input type="hidden" value="" id="group_selected"></input>
                    
                
                </div>

                <!--                <div class="splitPane-handle splitPane-handle_v clear" >
                                    <div class="splitPane-handle__bar"></div>
                                    <div class="splitPane-handle__label">Kéo thả bạn bè vào nhóm bạn bên dưới</div>
                                </div>-->
            </div>
            <div id="createGroup">
                <div  class="title_mb_bg2 create_group">

                    <ul>

                        <li>
                            <div class="col_l">Tên nhóm</div>
                            <div class="col_r"><input type="text" value="" id="i_name" class="inputtext"></div>
                        </li>
                        <li class="end">
                            <div class="col_l">Mô tả thêm</div>
                            <div class="col_r"><textarea id="i_desc" rows="4" class="inputtext"></textarea></div>
                        </li>

                    </ul>
                    <div class="button_bottom">
                        <div class="btn-left-02"><input type="button" onclick="CreateGroup();" id="btncreateGroup" name="btncreateGroup" value="Tạo nhóm" class="btnBlogComment left"></div>
                        <div class="btn-left-07"><input type="button" onclick="Lightbox.hide();" value="Hủy bỏ" class="left button"></div>
                        <img class="loading" style="display:none" src="/images/loading_small.gif">
                        <div class="clear"></div>
                    </div>
                    <div class="clear"></div>
                    <div id="message_alert_content" class="error"></div>
                </div>
            </div>
        </div>


    </div>

    <script src="/js/friends.js" type="text/javascript"></script>
    <script type="text/javascript">
        var options = [
            {title:"<img src='images/16x16/home.png' class='icon'><b>Trang cá nhân</b>", action:{type:"gourl",callback:"(function(data) { alert('Clicke item class name = '+triggerElement.className); })"}},
            {title:"<img src='images/add-friend.png' class='icon'>Kết bạn", action:{type:"fn",callback:"(function(data) { alert('Input name = '+data.inputValue()); })"}},
            {title:"<img src='images/16x16/mail.png' class='icon'>Gửi tin nhắn", action:{type:"gourl",url:"http://www.google.com/search?q=#inputValue#", target:"_blank"}},
        ];

        jQuery(".friend_box").jjmenu("rightClick", options, {inputValue: function() { return jQuery("#test").val() }, myid:5});
        var optionsGroup = [
            {title:"Xem chi tiết hoặc thay đổi", action:{type:"gourl",callback:"(function(data) { alert('Clicke item class name = '+triggerElement.className); })"}},
            {title:"Xem chia sẻ trong nhóm", action:{type:"fn",callback:"(function(data) { alert('Input name = '+data.inputValue()); })"}},
            {title:"Xóa nhóm này", action:{type:"gourl",url:"http://www.google.com/search?q=#inputValue#", target:"_blank"}},
        ];

        jQuery(".friend_group_box .content span,.friend_group_box .content span b").jjmenu("rightClick", optionsGroup, {inputValue: function() { return jQuery("#test").val() }, myid:5});
    </script>

</div>
